<template>
  <t-dialog :visible="dialogVisible" size="small" @dialog-close="cancel">
    <div slot="title" class="app-service-center-content-habit-create-dialog__title">{{ dialogTitle }}</div>
    <div slot="content" class="app-service-center-content-habit-create-dialog__content">
      <div class="app-service-center-content-habit-create-dialog__content__name">
        <div class="app-service-center-content-habit-create-dialog__content__name__title">习惯名称</div>
        <div class="app-service-center-content-habit-create-dialog__content__name__value">  
          <t-textarea :autosize="nameAutosize" :value="currentInputName" :focus="true" @input="handleCurrentInputName"></t-textarea>    
        </div>
      </div>
      <div class="app-service-center-content-habit-create-dialog__content__synopsis">
        <div class="app-service-center-content-habit-create-dialog__content__synopsis__title">习惯愿景</div>
        <div class="app-service-center-content-habit-create-dialog__content__synopsis__value">
          <t-textarea :autosize="synopsisAutosize" :value="currentInputSynopsis" @input="handleCurrentInputSynopsis"></t-textarea>              
        </div>
      </div>
    </div>
    <div slot="footer" style="text-align: right;">
      <t-button size="normal" type="insert" @click="createItem">添加</t-button>
      <t-button size="normal" type="primary" @click="cancel">退出</t-button>
    </div>
  </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TInput from '@/components/input';
  import TTextarea from '@/components/textarea';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  
  export default {
    name: 'app-service-center-content-topic-dialog',
    props: {
      store: {
        type: Object,
        required: true,
      },
    },
    components: {
      TDialog,
      TButton,
      TInput,
      TTextarea,
      TTable,
      TTableColumn,
    },
    data() {
      return {
        nameAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        synopsisAutosize: {
          minRows: 3,
          maxRows: 4,
        },
      };
    },
    computed: {
      topics() {
        return this.store.topics;
      },
      currentItem() {
        return this.store.current.item;
      },
      currentItemOtherAttrubutes() {
        if (this.store.current.item === null) return [];
        const attrs = [];
        attrs.push({ createDate: '创建时间', createDateVal: this.store.current.item.createDate });
        attrs.push({ createDate: '更新时间', createDateVal: this.store.current.item.updateDate });
        attrs.push({ createDate: '获得番茄', createDateVal: this.store.current.item.tomatoAmount });
        return attrs;
      },
      currentInputName() {
        return this.store.current.input.name;
      },
      currentInputSynopsis() {
        return this.store.current.input.synopsis;
      },
      dialogTitle() {
        return this.store.createDialog.title;
      },
      dialogVisible() {
        return this.store.createDialog.visible;
      },
    },
    methods: {
      handleCurrentInputName(val) {
        this.store.current.input.name = val;
      },
      handleCurrentInputSynopsis(val) {
        this.store.current.input.synopsis = val;
      },
      cancel() {
        this.$emit('close');
      },
      createItem() {
        const name = this.store.current.input.name;
        const synopsis = this.store.current.input.synopsis;
        const state = 'todo';
        const target = 'api/habits';
        this.$http.request({
          url: target,
          method: 'post',
          data: {
            name,
            synopsis,
            state,
          },
          transformRequest: [(data) => {
            const encodeName = encodeURIComponent(data.name);
            const encodeSynopsis = encodeURIComponent(data.synopsis);
            const encodeState = encodeURIComponent(data.state);
            return `name=${encodeName}&synopsis=${encodeSynopsis}&state=${encodeState}`;
          }],
        }).then((response) => {
          const item = response.data;
          const createDate = this.dateFormat(item.createTime);
          const updateDate = this.dateFormat(item.updateTime);
          const stateVal = item.state === 'todo' ? '打卡' : '完成';
          this.store.habits.push({
            index: this.store.habits.length + 1,
            name: item.name,
            tomatoInfo: `${item.todayTomatoAmount} 颗番茄`,
            createDate,
            updateDate,
            id: item.id,
            synopsis: item.synopsis,
            tomatoAmount: item.tomatoAmount,
            todayTomatoAmount: item.todayTomatoAmount,
            state: item.state,
            stateVal,
          });
          this.$emit('close');
        }).catch(() => {
        });
      },
      dateFormat(ut) {
        const day = ut.dayOfMonth;
        const dayValue = day < 10 ? `0${day}` : `${day}`;
        return `${ut.year}-${ut.monthValue}-${dayValue}`;
      },
    },
  };
</script>